<template>
	<view class="page">
		<u-navbar bgColor="#FFFFFF" title=" " placeholder :titleStyle="titleStyle">
			<template v-slot:left>
				<view class="leftTitleV" @click="onSelete()">
					{{nameCity}}
					<u-icon name="arrow-down" color="#BCBBBC"></u-icon>
				</view>
			</template>
		</u-navbar>
		<u-swiper @click="onBannerClick" :list="bannerList" keyName="imageurl" height="217" radius="0"
			imgMode="aspectFill"></u-swiper>
		<view class="tabV">
			<view v-for="(item,key) in tabList" :key="key" class="tabItemV" @click="onTabsClick(item)">
				<image :src="item.image"></image>
				<text>{{item.name}}</text>
			</view>
		</view>

		<view class="shareV" @click="onShopClick">
			<image class="shareIv" :src="shop_image" mode="aspectFill"></image>
			<view class="shareCenterV">
				<view class="storeV">
					<image class="storeIv" src="../../static/home/store.svg"></image>
					<view class="storeTv">潮品商城</view>
				</view>
				<view class="lookV">
					<view class="lookTv">查看</view>
					<u-icon name="arrow-right" color="#FFFFFF" size="13"></u-icon>
				</view>
			</view>
		</view>

		<view class="courseTv">课程推荐</view>

		<view class="courseV">
			<view v-if="mQuestionnaire==1 && mFormList">
				<view class="courseTitleV">
					<view v-if="mFormPost!=mFormList.length" class="courseTitleTv">
						{{ mFormList[mFormPost].title }}
						{{ mFormList[mFormPost].type=='checkbox'?'(多选）':'(单选）'}}
						<text>{{ mFormPost+1 }}</text>/{{mFormList.length}}
					</view>
					<!-- <u-icon name="arrow-down" color="#4C4C4C" size="17"></u-icon> -->
				</view>
				<!-- <view class="explainV">简单几步，快速推荐合适课程</view> -->
				<view  v-if="mFormPost!=mFormList.length" class="typeV">
					<view :class="mFormList[mFormPost].answer&&mFormList[mFormPost].answer.includes(qItem)?'typeItemVTo':'typeItemV'" v-for="(qItem,qIndex) in mFormList[mFormPost].option" :key="qItem" @click="onFormItemClick(mFormList[mFormPost],qItem,qIndex)">{{qItem}}
					</view>
				</view>
				<view v-if="mFormPost==mFormList.length" style="margin-left: 20rpx;margin-bottom: 10rpx;">
					<view class="inputV">
						<text class="inputTv">姓名</text>
						<input placeholder="请输入姓名" v-model="mName" />
					</view>
					<view class="inputV" style="margin-top: 30rpx;">
						<text class="inputTv">微信</text>
						<input placeholder="请输入微信号" v-model="mWx" />
					</view>
					<view class="inputV" style="margin-top: 30rpx;">
						<text class="inputTv">手机</text>
						<input placeholder="请输入手机号" v-model="mPhone" type="number"/>
					</view>
					<view class="inputV" style="margin-top: 30rpx;">
						<text class="inputTv">邮箱</text>
						<input placeholder="请输入邮箱" v-model="mGmail" />
					</view>
				</view>
				<view v-if="mFormPost==mFormList.length" class="nextVTo" @click="onSumClick()">提交</view>
				<view v-else class="nextV" @click="onNextClick()">下一步</view>
				<view class="lineHeight12 maTop30 bg2f2f2f"></view>
				<view class="timeV"></view>
			</view>


			<view class="timeBg">
				<view class="itemTimeV" v-for="(item,key) in timeList" :key="key">
					<view :class="key==dataListPos?'timeTv':'timeTvTo'">{{item.day}}</view>
					<view :class="key==dataListPos?'dayTv':'dayTvTo'" @click="onSelectTimeClick(item,key)">{{item.week}}
					</view>
				</view>
			</view>

			<view class="restV" v-if="false">当前暂无负荷偏好的课程，已为您推荐其他课程</view>

			<view class="listCourseV" v-for="(item,key) in homeCampList" :key="key" @click="onTuiJainClick(item,key)">
				<view class="itemTimeV">
					<view class="itemTimeTv">{{item.time}}</view>
					<u-icon name="close" color="#454545" size="17" v-if="false"></u-icon>
				</view>
				<view class="itemUserV">
					<image :src="item.coach_avatar"></image>
					<view class="projectV">{{item.title}}</view>
					<!-- <view class="makeV">预约</view> -->
					<view v-if="item.is_yuyue!=1" class="makeV">预约</view>
					<view v-if="item.is_yuyue==1" class="makeVTo">已预约</view>
				</view>
				<view class="juliV">
					<view class="juliTv">{{item.shop_name}} {{item.distance}}</view>
					<u-icon name="arrow-right" color="#4C4C4C" size="13"></u-icon>
				</view>
				<view class="lineHeight12 maTop30 bg2f2f2f"></view>
			</view>

			<view class="moreBiaoV" @click="onMoreTuiJainClick()">
				<view class="moreBiaoTv">查看更多课表</view>
				<u-icon name="arrow-right" color="#4C4C4C" size="13"></u-icon>
			</view>
		</view>

		<view class="shopV">
			<view class="shopTitleTv">门店</view>
			<view class="shopMoreTv" @click="onFindStoreClick">查看更多</view>
		</view>

		<view class="lookingV" @click="onFindStoreClick">
			<image class="lookingIv" :src="map_image" mode="aspectFill"></image>
			<view class="lookingV2">
				<view class="lookingTv">地图找店</view>
				<view class="lookingMoreV">
					<view class="lookingMoreTv">查看更多</view>
					<u-icon name="arrow-right" color="#513B00" size="13"></u-icon>
				</view>
			</view>
		</view>

		<view class="maTop30 padLeft30">
			<scroll-view class="listLookingSV" scroll-x="true">
				<view class="listLookingV" v-for="(item,key) in listLooking" :key="key" @click="onMapClick(item)">
					<image class="listLookingIv" :src="item.image"></image>
					<view class="listLookingTv">{{item.name}}</view>
					<view class="listLookingJuliTv">{{item.name}} {{item.distance}}</view>
					<view v-if="item.flag" class="listLookingJinTv">{{item.flag}}</view>
				</view>
			</scroll-view>
		</view>

		<view class="shopV">
			<view class="shopTitleTv">服务项目专区</view>
			<view class="shopMoreTv" @click="onMoreGroupClick()">查看更多</view>
		</view>

		<view class="maTop30 padLeft30">
			<scroll-view class="listLeagueSV" scroll-x="true">
				<view style="display: inline-block;">
					<view class="itemV" :style="{backgroundImage:'url('+item.bg+')'}" v-for="(item,key) in listCourse"
						:key="key">
						<view class="titleV">
							<view class="txt">{{item.name}}</view>
							<u-icon name="arrow-right" color="#BCBBBC" size="13"></u-icon>
						</view>
						<view @click="onGroupClick(data,pos)" class="itemsV" v-for="(data,pos) in item.list" :key="pos">
							<image class="imageIv" :src="data.image" mode="aspectFill"></image>
							<view class="right">
								<view class="subTv">{{data.title}}</view>
								<view class="txtTv">{{data.target}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="shopV">
			<view class="shopTitleTv">健康管理</view>
			<view class="shopMoreTv" @click="onMoreOnlineClick()">查看更多</view>
		</view>

		<view class="listPtV" v-for="(item,key) in listPt" :key="key" @click="onLineClick(item,key)">
			<image class="listPtIv" :src="item.image"></image>
			<view class="listPtCenterV">
				<view class="listPtTvV">
					<image class="bg" src="../../static/home/song.svg"></image>
					<view class="listPtTv1">送评估课</view>
				</view>
				<view class="listPtTv2">{{item.name}}</view>
				<view class="listPtTv3">{{item.memo}}</view>
			</view>
		</view>

		<view class="keV" v-if="false">
			<view class="keV1">
				<view class="keTv">身体素质评估课 ¥159</view>
				<u-icon name="arrow-right" color="#E6A5B4" size="13"></u-icon>
			</view>
			<view class="keV2">黑科技体测，量身制定训练规划</view>
		</view>

		<view class="enterpriseTv">企业服务</view>
		<view class="enterpriseV">
			<view class="enterpriseTitleV">女创未来为企业员工提供一站式美丽+健康解决方案</view>
			<view class="enterpriseTitleV">已有超过199家公司加入女创未来</view>
			<view class="courseBottomV">
				<view class="courseBottomTv1" @click="onNotOpenClick">企业服务介绍</view>
				<view class="courseBottomTv2" @click="onNotOpenClick">企业采购</view>
			</view>
		</view>
		<view class="labelV">
			<view class="labelV1">
				<image class="labelIv" src="../../static/home/label1.svg"></image>
				<view class="labelTv">按次付费</view>
			</view>
			<view class="labelV1">
				<image class="labelIv" src="../../static/home/label2.svg"></image>
				<view class="labelTv">优质服务</view>
			</view>
			<view class="labelV1">
				<image class="labelIv" src="../../static/home/label3.svg"></image>
				<view class="labelTv">专家团队</view>
			</view>
			<view class="labelV1">
				<image class="labelIv" src="../../static/home/label4.svg"></image>
				<view class="labelTv">高效省时</view>
			</view>
		</view>
		<bind v-if="false"></bind>
		<ns-login ref="login" @saveUserInfo="onUserInfoClick"></ns-login>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					"color": "#ffffff"
				},
				mQuestionnaire: undefined, //1显示推荐 2不显示推荐
				mFormList: undefined, //问卷调查
				mFormId:undefined,//问卷调查id
				mFormPost: 0, //问卷调查索引
				mFormData: undefined, //问卷调查数据
				nameCity: '',
				bannerList: [],
				tabList: [],
				dataListPos: 0,
				mDay: "", //时间
				timeList: [],
				homeCampList: [],
				listLooking: [], //门店
				listCourse: [], //团课专区
				listPt: [], //私教
				map_image: '', //共享门店背景图
				shop_image: '', //商城背景图
				mName: '', //
				mGmail: '',
				mPhone: '',
				mWx: '',
			}
		},
		onLoad() {
			let that = this;
			uni.authorize({
				scope: 'scope.userLocation',
				success() {
					uni.getLocation({
						type: 'gcj02',
						geocode: true, //设置该参数为true可直接获取经纬度及城市信息
						success: function(res) {
							that.getCityName(res.latitude, res.longitude);
							uni.setStorageSync("user_longitude", res.longitude);
							uni.setStorageSync("user_latitude", res.latitude);

							that.getFuJinShop();
						},
						fail(res) {
							console.log("定位失败--" + JSON.stringify(res))
						}
					});
				},
				fail() {
					uni.showModal({
						title: '未打开小程序定位',
						content: '找不到您的位置，请开启定位',
						confirmText: '开启定位',
						showCancel: false,
						success: (res) => {
							if (res.confirm) {
								uni.openSetting(); // 打开地图权限设置
							}
						}
					});
				}
			})

			
		},
		onShow() {
			this.getHome();
			this.getHomeShopList();
			this.getHomeComboList();
			this.getHomeCoachList();
			this.userInfo = uni.getStorageSync("user_info");
			if (this.userInfo) {
				this.$refs.login.close();

				this.getUserInfo();
				// this.getHomeComboList();
			} else {
				this.$refs.login.open({
					show: true
				});
			}
		},
		onShareAppMessage: function(res) {
			return {
				title: "女创未来共享平台",
				path: `/pages/app/Home`, // 分享后打开的页面
				success: function(res) {
					console.log("转发成功")
				},
				fail: function(res) {
					console.log("转发失败")
				}
			}
		},
		methods: {
			getFuJinShop() {
				this.$api.getFuJinShop({
					longitude: uni.getStorageSync("user_longitude"),
					latitude: uni.getStorageSync("user_latitude")
				}).then((res) => {
					this.getUserInfo();
				}).catch((e) => {})
			},
			getUserInfo() { //获取个人资料
				this.$api.getUserInfo({
					longitude: uni.getStorageSync("user_longitude"),
					latitude: uni.getStorageSync("user_latitude")
				}).then((res) => {
					this.userInfo = res;
					this.nameCity = res.shop_name;
					this.mQuestionnaire = res.is_form; //1显示 0不显示
					if (this.mQuestionnaire == 1) {
						this.getForm();
					}
				}).catch((e) => {})
			},
			getForm() { //获取问卷调查
				this.$api.getForm({

				}).then((res) => {
					res.list.map((item,index)=>{
						item.answer = "";
					})
					this.mFormList = res.list;
					this.mFormId = res.form_id
					this.mFormPost = 0;
				}).catch((e) => {})
			},
			onNextClick() { //问卷调查下一步
				if(this.mFormList[this.mFormPost].answer){
					this.mFormPost++;
				}
			},
			onFormItemClick(data,item,index){
				//多选
				if(data.type=="checkbox"){
					if(data.answer){
						let answerList = data.answer.split(",");
						let isYes = -1;
						answerList.map((text,index)=>{
							if(item==text){
								isYes = index;
							}
						})
						if(isYes!=-1){
							answerList.splice(isYes, 1);
						}else{
							answerList.push(item);
						}
						data.answer = answerList.join(",");
					}else{
						data.answer = item;
					}
				}else{//单选
					data.answer = item;
				}
			},
			onSumClick() { //提交问卷调查
				if (this.mName.length == 0) {
					uni.$u.toast("请输入姓名")
					return
				}
				if (this.mWx.length == 0) {
					uni.$u.toast("请输入微信号")
					return
				}
				if (this.mPhone.length == 0) {
					uni.$u.toast("请输入手机号")
					return
				}
				if (this.mGmail.length == 0) {
					uni.$u.toast("请输入邮箱")
					return
				}
				let jsonData = [];
				this.mFormList.map((item,index)=>{
					let data ={
						question_id:item.id,
						option:item.answer
					}
					jsonData.push(data);
				})
				this.$api.addForm("", {
						params: {
							form_id: this.mFormId,
							json: jsonData,
							name:this.mName,
							email:this.mGmail,
							mobile: this.mPhone,
							wechat: this.mWx
						}
					}).then((res) => {
					this.mName = "";
					this.mGmail = "";
					this.getUserInfo();
					uni.$u.toast("提交成功");
				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "提交失败" : e.msg)
				})
			},
			onUserInfoClick(e) {
				if (e.code == 200) {
					this.getUserInfo();
					this.getHome();
					this.getHomeShopList();
					this.getHomeComboList();
					this.getHomeCoachList();
				}
			},
			getCityName(lat, log) {
				this.$api.getCityName({
					latitude: lat,
					longitude: log
				}).then((res) => {
					// this.nameCity = res.city;
				}).catch((e) => {})
			},
			getHome() { //获取首页数据
				this.$api.getHome({

				}).then((res) => {
					this.shop_image = res.shop_image;
					this.map_image = res.map_image;
					this.bannerList = res.banner_list
					this.tabList = res.menu_list
					this.timeList = res.day7
					if (this.timeList.length > 0) {
						this.mDay = this.timeList[0].day;
						this.getHomeCampList();
					}
				}).catch((e) => {})
			},
			onSelectTimeClick(item, key) {
				this.dataListPos = key;
				this.mDay = item.day;
				this.getHomeCampList();
			},
			getHomeCampList() { //课程推荐
				this.$api.getHomeCampList({
					day: this.mDay,
					longitude: uni.getStorageSync("user_longitude"),
					latitude: uni.getStorageSync("user_latitude")
				}).then((res) => {
					this.homeCampList = res
				}).catch((e) => {})
			},
			getHomeShopList() { //健身门店
				this.$api.getHomeShopList({
					longitude: uni.getStorageSync("user_longitude"),
					latitude: uni.getStorageSync("user_latitude")
				}).then((res) => {
					this.listLooking = res
				}).catch((e) => {})
			},
			getHomeComboList() { //团课专区
				this.$api.getHomeComboList({
					longitude: uni.getStorageSync("user_longitude"),
					latitude: uni.getStorageSync("user_latitude")
				}).then((res) => {
					this.listCourse = res
				}).catch((e) => {})
			},
			getHomeCoachList() { //私教
				this.$api.getHomeCoachList({
					longitude: uni.getStorageSync("user_longitude"),
					latitude: uni.getStorageSync("user_latitude")
				}).then((res) => {
					this.listPt = res
				}).catch((e) => {})
			},


			onTabsClick(item) {
				if (!this.userInfo) {
					this.$refs.login.open({
						show: true
					});
					return;
				}
				if (item.name == "团课") {
					this.$u.route({
						url: "/mine/home/LeagueCate",
					})
				} else if (item.type == 1) {
					this.$u.route({
						url: item.page,
					})
				} else {
					if (item.target != null) {
						uni.setStorageSync("router_to", item.target);
					}
					uni.switchTab({
						url: item.page
					});
				}
			},
			onMoreTuiJainClick() { //更多热门推荐
				if (!this.userInfo) {
					this.$refs.login.open({
						show: true
					});
					return;
				}
				// uni.setStorageSync("router_to", 1);
				// uni.switchTab({
				// 	url: "/pages/app/Schedule"
				// });
				uni.setStorageSync("router_to", 0);
				uni.switchTab({
					url: "/pages/app/Schedule"
				});
			},
			onTuiJainClick(item, pos) { //推荐
				if (!this.userInfo) {
					this.$refs.login.open({
						show: true
					});
					return;
				}
				this.$u.route({
					url: '/pages/schedule/GroupDetails', //'/pages/schedule/BootcampDetails',
					params: {
						id: item.id,
					}
				})
			},
			onMoreGroupClick() { //更多热门团课
				if (!this.userInfo) {
					this.$refs.login.open({
						show: true
					});
					return;
				}
				uni.setStorageSync("router_to", 0);
				uni.switchTab({
					url: "/pages/app/Schedule"
				});
			},
			onGroupClick(item, pos) { //团课详情
				if (!this.userInfo) {
					this.$refs.login.open({
						show: true
					});
					return;
				}
				uni.setStorageSync("router_to", 0);
				uni.switchTab({
					url: "/pages/app/Schedule",
					success: (res) => {
						console.log("跳转成功", res)
						setTimeout(() => {
							uni.$emit('ScreeningShaiXuan', {
								id: item.id
							});
						}, 2000)
					},
					fail: (error) => {
						console.log("跳转失败", error)
					}
				});

				// this.$u.route({
				// 	url: '/pages/schedule/GroupDetails',
				// 	params: {
				// 		id: item.id,
				// 	}
				// })
			},
			onMoreOnlineClick() { //更多热门线上课
				if (!this.userInfo) {
					this.$refs.login.open({
						show: true
					});
					return;
				}
				uni.setStorageSync("router_to", 3);
				uni.switchTab({
					url: "/pages/app/Schedule"
				});
			},
			onLineClick(item, pos) {
				if (!this.userInfo) {
					this.$refs.login.open({
						show: true
					});
					return;
				}
				uni.setStorageSync("router_to", 3);
				uni.setStorageSync("router_online_id", item.id);
				uni.switchTab({
					url: "/pages/app/Schedule"
				});
			},
			onFindStoreClick() { //地图找店查看更多
				this.$u.route({
					url: '/mine/home/MapStore',
				})
			},
			onMapClick(item) { //地图找店--》门店详情
				this.$u.route({
					url: '/mine/home/FitnessStore',
					params: {
						id: item.id
					}
				})
			},
			onShopClick() {
				this.$u.route({
					url: '/shop/home/mall',
				})
			},
			onSelete() { //选择门店
				this.$u.route({
					url: '/mine/home/SeleteStore',
				})
			},
			onBannerClick(e) { //轮播图点击
				console.log("----", e);
				if (this.bannerList[e] && this.bannerList[e].linkurl) {
					this.$u.route({
						url: '/shop/MyWebView',
						params: {
							item: JSON.stringify(this.bannerList[e])
						}
					})
				}
			},
			onNotOpenClick() {
				// uni.$u.toast("暂未开放");
			}
		}
	}
</script>

<style lang="scss">
	.leftTitleV {
		font-size: 32rpx;
		color: #FFFFFF;
		display: flex;
	}

	.tabV {
		display: flex;
		margin-top: 78rpx;

		.tabItemV {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				width: 108rpx;
				height: 87rpx;
			}

			text {
				color: #333333;
				font-size: 22rpx;
				margin-top: 10rpx;
			}
		}
	}

	.shareV {
		margin-top: 50rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		height: 140rpx;
		position: relative;

		.shareIv {
			width: 100%;
			height: 140rpx;

		}

		.shareCenterV {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 140rpx;
			position: absolute;
			top: 0;
			left: 50rpx;
			right: 30rpx;

			.storeV {
				display: flex;
				align-items: center;

				.storeIv {
					width: 33rpx;
					height: 33rpx;
				}

				.storeTv {
					font-size: 36rpx;
					color: #E6A5B4;
					margin-left: 20rpx;
				}
			}

			.lookV {
				height: 50rpx;
				display: flex;
				padding-left: 20rpx;
				padding-right: 15rpx;
				background-color: #E6A5B4;
				border-radius: 25rpx;
				align-items: center;
				justify-content: center;

				.lookTv {
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.courseTv {
		margin-top: 70rpx;
		color: #333333;
		font-weight: bold;
		font-size: 36rpx;
		margin-left: 30rpx;
	}

	.courseV {
		background-color: #F9F6F6;
		border-radius: 10rpx;
		margin-top: 30rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-top: 30rpx;

		.courseTitleV {
			display: flex;
			justify-content: space-between;
			padding-left: 20rpx;
			padding-right: 20rpx;

			.courseTitleTv {
				font-size: 32rpx;
				color: #333333;

				text {
					color: #E6A5B4;
					font-size: 32rpx;
				}
			}
		}

		.explainV {
			font-size: 24rpx;
			color: #9b9b9b;
			margin-top: 10rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
		}

		.typeV {
			margin-left: 22rpx;
			margin-right: 22rpx;
			display: grid;
			grid-template-columns: 48% 48%;
			justify-content: space-between;

			.typeItemV {
				flex: 1;
				background-color: #E6A5B4;
				border-radius: 15rpx;
				height: 77rpx;
				color: #FFFFFF;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 20rpx;
			}
			
			.typeItemVTo {
				flex: 1;
				background-color: #E6A5B4;
				border-radius: 15rpx;
				height: 77rpx;
				color: #333;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 20rpx;
			}
		}

		.nextV {
			height: 77rpx;
			background-color: #E6A5B4;
			border-radius: 15rpx;
			color: #FFFFFF;
			font-size: 28rpx;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 20rpx;
			margin-right: 20rpx;
		}

		.nextVTo {
			height: 77rpx;
			background-color: #E6A5B4;
			border-radius: 15rpx;
			color: #333;
			font-size: 28rpx;
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 20rpx;
			margin-right: 20rpx;
		}

		.timeV {
			display: flex;

			.timeItem {}
		}

		.timeBg {
			height: 150rpx;
			display: flex;

			.itemTimeV {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.timeTv {
					font-size: 24rpx;
					color: #E6A5B4;
				}

				.timeTvTo {
					font-size: 24rpx;
					color: #E6A5B4;
				}

				.dayTv {
					width: 50rpx;
					height: 50rpx;
					border: 2px solid #E6A5B4;
					border-radius: 50%;
					font-size: 24rpx;
					color: #E6A5B4;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 20rpx;
				}

				.dayTvTo {
					width: 50rpx;
					height: 50rpx;
					border: 2px solid #E6A5B4;
					background-color: #E6A5B4;
					border-radius: 50%;
					font-size: 24rpx;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 20rpx;
				}
			}
		}

		.restV {
			height: 60rpx;
			background-color: rgba(254, 198, 0, 0.05);
			margin-left: 20rpx;
			margin-right: 20rpx;
			font-size: 24rpx;
			color: #E6A5B4;
			border-radius: 5rpx;
			padding-left: 12rpx;
			display: flex;
			align-items: center;
		}

		.listCourseV {
			padding-left: 20rpx;
			padding-right: 20rpx;
			padding-top: 30rpx;
			box-sizing: border-box;

			.itemTimeV {
				display: flex;
				justify-content: space-between;

				.itemTimeTv {
					color: #E6A5B4;
					font-size: 36rpx;
				}
			}

			.itemUserV {
				display: flex;
				margin-top: 13rpx;
				align-items: center;
				justify-content: space-between;

				.projectV {
					font-size: 28rpx;
					color: #e8e8e8;
					margin-left: 20rpx;
					flex: 1;
				}

				.makeV {
					width: 119rpx;
					min-width: 119rpx;
					max-width: 119rpx;
					height: 54rpx;
					background-color: #E6A5B4;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #333;
					font-size: 28rpx;
				}

				.makeVTo {
					width: 119rpx;
					min-width: 119rpx;
					max-width: 119rpx;
					height: 54rpx;
					background: #00000000;
					border-radius: 10rpx;
					border: 1rpx solid #939393;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #939393;
					font-size: 28rpx;
				}

				image {
					width: 40rpx;
					height: 40rpx;
					min-width: 40rpx;
					background-color: #E6A5B4;
					border-radius: 50%;
				}
			}

			.juliV {
				margin-top: 22rpx;
				display: flex;
				align-items: center;
			}

			.juliTv {
				color: #9B9B9B;
				font-size: 24rpx;
			}
		}

		.moreBiaoV {
			height: 93rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.moreBiaoTv {
				font-size: 24rpx;
				color: #9B9B9B;
			}
		}
	}

	.shopV {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-right: 48rpx;
		margin-top: 70rpx;

		.shopTitleTv {
			font-size: 36rpx;
			color: #333333;
			font-weight: bold;
		}

		.shopMoreTv {
			border-radius: 25rpx;
			border: 1px solid #4A4A4A;
			font-size: 24rpx;
			color: #9B9B9B;
			padding-top: 9rpx;
			padding-bottom: 9rpx;
			padding-left: 27rpx;
			padding-right: 27rpx;
		}
	}

	.lookingV {
		margin-top: 30rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		height: 180rpx;
		position: relative;

		.lookingIv {
			width: 100%;
			height: 180rpx;
		}

		.lookingV2 {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 60rpx;
			right: 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.lookingTv {
				font-size: 36rpx;
				color: #E6A5B4;
			}

			.lookingMoreV {
				height: 50rpx;
				padding-left: 21rpx;
				padding-right: 22rpx;
				border-radius: 25rpx;
				background: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;

				.lookingMoreTv {
					font-size: 24rpx;
					color: #513B00;
				}
			}
		}
	}

	.listLookingSV {
		white-space: nowrap;
		vertical-align: middle;
		display: inline-block;
		overflow: hidden;
		width: 100%;

		.listLookingV {
			display: inline-block;
			width: 543rpx;
			height: 371rpx;
			margin-right: 20rpx;
			background: #C37F8F;
			border-radius: 14rpx;
			position: relative;

			.listLookingIv {
				width: 543rpx;
				height: 251rpx;
				border-radius: 14rpx 14rpx 0rpx 0rpx;
			}

			.listLookingTv {
				font-size: 28rpx;
				color: #FFFFFF;
				margin-top: 20rpx;
				padding-left: 16rpx;
			}

			.listLookingJuliTv {
				font-size: 24rpx;
				color: #FFFFFF;
				margin-top: 10rpx;
				padding-left: 16rpx;
			}

			.listLookingJinTv {
				position: absolute;
				top: 213rpx;
				left: 20rpx;
				background: #E6A5B4;
				border-radius: 10rpx;
				font-size: 22rpx;
				color: #FFFFFF;
				padding-left: 20rpx;
				padding-right: 20rpx;
				padding-top: 10rpx;
				padding-bottom: 10rpx;
			}
		}
	}

	.listLeagueSV {
		white-space: nowrap;
		vertical-align: middle;
		display: inline-block;
		overflow: hidden;
		width: 100%;

		.itemV {
			width: 543rpx;
			display: inline-flex;
			flex-direction: column;
			// background: #382425;
			border-radius: 14rpx;
			padding: 30rpx;
			margin-right: 20rpx;
			background-size: 100% 100%;

			.titleV {
				display: flex;
				justify-content: space-between;

				.txt {
					font-size: 32rpx;
					color: #E8E8E8;
				}
			}

			.itemsV {
				width: 100rpx;
				display: flex;
				margin-top: 30rpx;

				.imageIv {
					min-width: 136rpx;
					width: 136rpx;
					height: 102rpx;
					border-radius: 8rpx;
				}

				.right {
					flex: 1;
					margin-left: 10rpx;

					.subTv {
						width: 350rpx;
						font-size: 28rpx;
						color: #E8E8E8;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.txtTv {
						font-size: 22rpx;
						color: #969190;
					}
				}
			}
		}
	}

	.listPtV {
		height: 280rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 30rpx;
		position: relative;

		.listPtIv {
			width: 100%;
			height: 280rpx;
		}

		.listPtCenterV {
			position: absolute;
			top: 108rpx;
			left: 40rpx;

			.listPtTvV {
				width: 128rpx;
				height: 42rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;

				.listPtTv1 {
					font-size: 22rpx;
					color: #191200;
					z-index: 1;
				}

				.bg {
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					width: 128rpx;
					height: 42rpx;
				}
			}


			.listPtTv2 {
				font-size: 36rpx;
				color: #EDEDED;
				margin-top: 16rpx;
			}

			.listPtTv3 {
				font-size: 22rpx;
				color: #EFEDEA;
				margin-top: 6rpx;
			}
		}
	}

	.keV {
		margin-top: 30rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		height: 120rpx;
		background: #1F1F1F;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.keV1 {
			display: flex;
			align-items: center;
			justify-content: center;

			.keTv {
				font-size: 32rpx;
				color: #E6A5B4;
			}
		}

		.keV2 {
			font-size: 22rpx;
			margin-top: 7rpx;
			color: #BBBBBB;
		}
	}

	.enterpriseTv {
		margin-top: 70rpx;
		color: #333333;
		font-weight: bold;
		font-size: 36rpx;
		margin-left: 30rpx;
	}

	.enterpriseV {
		border-radius: 20rpx;
		background: #F9F6F6;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 30rpx;
		padding-bottom: 40rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 30rpx;

		.enterpriseTitleV {
			font-size: 32rpx;
			color: #343434;
		}

		.courseBottomV {
			display: flex;
			margin-top: 50rpx;

			.courseBottomTv1 {
				flex: 1;
				height: 70rpx;
				border-radius: 10rpx;
				border: 1px solid #E6A5B4;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				color: #E6A5B4;
				margin-right: 15rpx;
			}

			.courseBottomTv2 {
				flex: 1;
				height: 70rpx;
				border-radius: 10rpx;
				border: 1px solid #E6A5B4;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				color: #E6A5B4;
				margin-left: 15rpx;
			}
		}
	}

	.labelV {
		display: flex;
		margin-top: 40rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-bottom: 45rpx;

		.labelV1 {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;

			.labelIv {
				width: 24rpx;
				height: 24rpx;
			}

			.labelTv {
				font-size: 24rpx;
				color: #9B9B9B;
				margin-left: 4rpx;
			}
		}
	}

	.inputV {
		display: flex;
		align-items: center;
		margin-top: 20rpx;

		.inputTv {
			color: #fff;
			font-size: 32rpx;
		}

		input {
			color: #fff;
			margin-left: 20rpx;
		}
	}
</style>